<template>
  <section class="chart-container">
    <div class="select_top">
      <el-date-picker
        style="width:15%;margin-right:1%"
        v-model="year"
        type="year"
        placeholder="选择年"
        :clearable="false"
        valueFormat="yyyy"
      >
      </el-date-picker>
      <el-button @click="getsaList">筛选</el-button>
      <el-button @click="doexportExcel2">导出</el-button>
      <el-button @click="savepingyi" style="float:right" type="primary">保存</el-button>
    </div>

    <el-table
      :data="salistdata"
      border
      height="500"
      id="excel"
      style="width:92%; margin:20px auto;text-align:center"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column prop="borgname" label="评议对象"></el-table-column>
      <el-table-column v-for="item in tabheadlist" :key="Math.random()" :label="item.aorgname">
        <template slot-scope="scope">
          {{scope.row[item.aorgname]}}
        </template>
      </el-table-column>


      <el-table-column
        prop="hash.orgname"
        width="250"
        fixed="right"
        label="等级设置"
      >
        <template slot-scope="scope">
          <el-select v-model="scope.row.borglevel" style="width:200px" clearable placeholder="请选择"
            @change="changegrade($event,scope.row)"
          >
            <el-option
              v-for="item in sortList"
              :key="item.value"
              :label="item.hash.gname"
              :value="item.hash.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="加减分" fixed="right">
        <template slot-scope="scope">
          {{Number(scope.row.borggrade).toFixed(2)}}
        </template>
      </el-table-column>
      <el-table-column label="最终得分" fixed="right">
        <template slot-scope="scope">
          {{(Number(scope.row['平均分'])+Number(scope.row.borggrade)).toFixed(2)}}
        </template>
      </el-table-column>
    </el-table>

  </section>
</template>
<script>
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

export default {
  data() {
    return {
      ts: this.newStore(),
      year: '',
      saList: [],
      value: '',
      rowIndex: '-1',
      tabheadlist: [],
      sortList: [],
      OrderIndexArr: [],
      OrderIndexArr2: [],
      options: [{
        value: '选项1',
        label: '黄金糕',
      }, {
        value: '选项2',
        label: '双皮奶',
      }, {
        value: '选项3',
        label: '蚵仔煎',
      }, {
        value: '选项4',
        label: '龙须面',
      }, {
        value: '选项5',
        label: '北京烤鸭',
      }],
    };
  },
  mounted() {
    // 去除hover效果
    setTimeout(() => {
      const obj = document.getElementsByClassName('el-table--enable-row-hover')[0];
      let clz = obj.getAttribute('class');
      clz = clz.replace('el-table--enable-row-hover', '');
      obj.setAttribute('class', clz);
    }, 1);
  },
  created() {
    this.year = `${new Date().getFullYear()}`;
    this.getsaList();
    this.getsortList();
  },
  methods: {
    changegrade(item, item2) {
      console.log(item);
      console.log(item2);
      for (let i = 0; i < this.sortList.length; i += 1) {
        if (item == this.sortList[i].hash.id) {
          item2.borggrade = this.sortList[i].hash.gvalue;
        }
      }
    },
    doexportExcel2() {
      /* generate workbook object from table */
      const tbale = document.querySelector('#excel').cloneNode(true);
      console.log(tbale);

      tbale.removeChild(tbale.querySelector('.el-table__fixed-right'));
      const wb = XLSX.utils.table_to_book(tbale, { raw: true });

      /* get binary string as output */
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '评议汇总表.xlsx');
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout); }
      return wbout;
    },

    getsortList() {
      const req = {
        handle: 'B37BA078041E48C77490C04E14B08D6128A1B50ACE714F29BFF0B9210751F692',
        query: '',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sortList = ts.d.data.operation1;
        console.log(this.sortList);
      });
    },
    savepingyi() {
      const orgid = [];
      const gradeid = [];
      const gvalue = [];
      for (let i = 0; i < this.salistdata.length; i += 1) {
        console.log(this.salistdata[i]);
        orgid.push(this.salistdata[i].borgid);
        gradeid.push(this.salistdata[i].borglevel);
        gvalue.push(this.salistdata[i].borggrade);
      }
      const req = {
        handle: 'B37BA078041E48C74E95A8D2219E38CBBD8BB12FF7DF91B5BFF0B9210751F692',
        year: this.year,
        orgid,
        gradeid,
        gvalue,
      };
      this.$confirm('是否保存修改数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.$message({
            type: 'success',
            message: '保存成功!',
          });
          this.getsaList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
    getsaList() {
      const req = {
        handle: '897AEEB66312B81B62B37B5DFDB9A8CD39839457C5FB77B864EDEA66339D7026',
        year: this.year,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.saList = ts.d.data.operation1;
        this.saList2 = ts.d.data.operation2;
        console.log('this.saList2', this.saList2);

        this.tabheadlist = [];
        const aorgnamelist = [];
        for (let i = 0; i < this.saList.length; i += 1) {
          if (aorgnamelist.indexOf(this.saList[i].hash.aorgname) == -1) {
            aorgnamelist.push(this.saList[i].hash.aorgname);
            if (this.saList[i].hash.aorgname != '总得分' && this.saList[i].hash.aorgname != '平均分') {
              this.tabheadlist.push({ aorgname: this.saList[i].hash.aorgname });
            }
          }
        }

        this.tabheadlist.push({ aorgname: '总得分' });
        this.tabheadlist.push({ aorgname: '平均分' });
        for (let i = 0; i < this.saList.length; i += 1) {
          for (let j = 0; j < this.tabheadlist.length; j += 1) {
            if (this.tabheadlist[j].aorgname == this.saList[i].hash.aorgname) {
              if (!this.tabheadlist[j].borgname) {
                this.tabheadlist[j].borgname = [];
              }
              if (this.tabheadlist[j].borgname.indexOf(this.saList[i].hash.borgname) == -1) {
                this.tabheadlist[j].borgname.push(this.saList[i].hash.borgname);
              }
            }
          }
        }


        this.salistdata = [];
        for (let i = 0; i < this.saList.length; i += 1) {
          let isfind = false;
          for (let j = 0; j < this.salistdata.length; j += 1) {
            if (this.saList[i].hash.borgname == this.salistdata[j].borgname) {
              isfind = true;
              this.salistdata[j][this.saList[i].hash.aorgname] = this.saList[i].hash.score;
            }
          }

          if (!isfind) {
            const d1 = {};
            d1[this.saList[i].hash.aorgname] = this.saList[i].hash.score;
            d1.borgname = this.saList[i].hash.borgname;
            d1.borgid = this.saList[i].hash.borgid;
            d1.borggrade = '0';
            // console.log(d1);
            this.salistdata.push(d1);
          }
        }

        for (let i = 0; i < this.salistdata.length; i += 1) {
          for (let j = 0; j < this.saList2.length; j += 1) {
            console.log(this.saList2[j].hash.orgid);

            if (this.salistdata[i].borgid == this.saList2[j].hash.orgid) {
              console.log('if');
              this.salistdata[i].borglevel = this.saList2[j].hash.gradeid;
              this.salistdata[i].borggrade = this.saList2[j].hash.gvalue;
            }
          }
        }

        console.log(this.salistdata);
      });
    },
  },
};
</script>

<style lang="stylus">
.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #fff !important;
}
.el-table th>.cell
  text-align center
.chart-container
  min-height 100vh
  background #f1f1f1
  width: 100%;
  float: left;
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.sa_title
  text-align center
  font-size 20px
  border-top 1px solid #cccccc
  padding-top 20px
  margin 20px auto
  width 92%
.line
  border-bottom 1px solid #ccc
  font-size 18px
  text-align center
  margin 20px 0
  padding-bottom 5px
  color black
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>

